<template>
  <div class="addExpense">
    <el-form ref="form" :model="form" :rules="roleCodeRule" label-width="120px">
      <el-row>
        <mainTilte title="基本信息" />
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="系统sku">
            <el-input v-model.trim="form.code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="中文名称">
            <el-input v-model.trim="form.name_ch" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="英文名称">
            <el-input v-model="form.name_en" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品分类">
            <el-input v-model.trim="form.category_name" disabled />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="所属供应商">
            <el-input v-model.trim="form.supplier_name" disabled />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="采购价(RMB)" prop="value">
            <el-input v-model.trim="form.purchase_price_rmb" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购价(USD)" prop="value">
            <el-input v-model.trim="form.purchase_price_usd" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商品主图" prop="image_url">
            <upload-file accept-type="image/jpeg,image/png" list-type="picture-card" :file-list="imageList" :upload-limit="1" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <mainTilte title="产品信息" />
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="尺寸">
            <el-input v-model.trim="form.size" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="重量">
            <el-input v-model.trim="form.weight" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="颜色">
            <el-input v-model.trim="form.color" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="材质">
            <el-input v-model.trim="form.material" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计量单位">
            <el-select v-model="form.unit" disabled>
              <el-option v-for="(item, index) of unitList" :key="index" :label="item.dict_data_name" :value="`${item.id}`" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="箱率">
            <el-input v-model.trim="form.box_rate" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装方式">
            <el-select
              v-model.trim="form.packing_method"
              clearable
              placeholder="包装方式"
              disabled
            >
              <el-option
                v-for="(item, index) of splitOrderList"
                :key="index"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他备注">
            <el-input v-model="form.other_remark" disabled type="textarea" autosize />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="dialog-footer-center">
        <span>
          <el-button type="primary" @click="$router.go(-1)">返回</el-button>
        </span>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      form: {
        id: '', // id
        name_ch: '', // 中文名称
        name_en: '', // 英文名称
        category_id: '', // 商品分类
        category_name: '', // 商品分类名称
        supplier_id: '', // 供应商id
        supplier_name: '', // 供应商名称
        purchase_price_rmb: '', // 采购价格 rmb
        purchase_price_usd: '', // 采购价格 usd

        size: '', // 尺寸
        weight: '', // 重量
        color: '', // 颜色
        material: '', // 材质
        unit: '', // 计量单位
        box_rate: '', // 箱率
        packing_method: '', // 包装方式
        other_remark: '' // 其他备注
      },
      imageList: [],
      roleCodeRule: {},
      freightList: [],
      fileList: [],
      // 包装方式 ：1-普通商品 2-多箱包装
      splitOrderList: [
        {
          code: 1,
          name: '普通商品'
        },
        {
          code: 2,
          name: '多箱包装'
        }
      ],
      unitList: []
    }
  },
  created() {
    const vm = this
    vm.getUnitList()
  },
  methods: {
    getUnitList() {
      const vm = this
      vm.$cache.getDic('unit').then(res => {
        vm.unitList = res
        vm.getInfo()
      })
    },
    getInfo() {
      const vm = this
      const id = vm.$route.params.id
      vm.loading = true
      vm.$http
        .get(`/product/${id}`)
        .then(res => {
          vm.form.id = res.data.id
          vm.form.code = res.data.code
          vm.form.name_ch = res.data.name_ch
          vm.form.name_en = res.data.name_en
          vm.form.category_id = res.data.category_id
          vm.form.category_name = res.data.category_name
          vm.form.supplier_id = res.data.supplier_id
          vm.form.supplier_name = res.data.supplier_name
          vm.form.purchase_price_rmb = res.data.purchase_price_rmb
          vm.form.purchase_price_usd = res.data.purchase_price_usd
          if (res.data.otherData) {
            vm.form.size = res.data.otherData.size // 尺寸
            vm.form.weight = res.data.otherData.weight // 重量
            vm.form.color = res.data.otherData.color // 颜色
            vm.form.material = res.data.otherData.material // 材质
            vm.form.other_remark = res.data.otherData.other_remark // 其他备注
          }
          if (res.data.packData) {
            vm.form.unit = res.data.packData.unit // 计量单位
            vm.form.box_rate = res.data.packData.box_rate // 箱率
          }
          vm.form.packing_method = res.data.packing_method // 包装方式
          if (res.data.image_url) {
            vm.setImageList(res.data.image_url)
          }
          vm.loading = false
        })
        .catch((err) => {
          console.log(err)
          vm.loading = false
        })
    },
    // 设置 图片 列表
    setImageList(url) {
      const vm = this
      const name = url.split('/').pop()
      vm.imageList = [{ name, url }]
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        )
      }
    },
    handleSelect() {},
    handleImageSuccess(data) {
      // this.fileList = [];
      // this.fileList.push({ name: data, url: data });
      // this.form.attachment = this.fileList[0].name;
    },
    beforeRemoveFile() {
      // this.fileList = [];
    },

    // 保存
    onSubmit() {}
  }
}
</script>

<style scoped>
.addExpense {
  padding: 15px;
  background: #fff;
}
/deep/.el-select,
.el-autocomplete {
  width: 100%;
}
.sizeStyle {
  display: flex;
}
.sizeStyle /deep/ .el-input__inner {
  border-right: 0;
}
.sizeStyle /deep/ .el-input-group__append {
  padding-left: 4px;
  padding-right: 4px;
  font-size: 14px;
  color: #333333;
  background: #fff;
}
</style>
